<template>
  <div class="yun-view">
    <div class="view-search">
      <el-input
      v-model="searchValue"
      placeholder="请输入"
      class="search-input"
    >
    <template #append>
      <el-button class="search-btn" type="primary">搜索</el-button>
    </template>
    </el-input>
    </div>
    <div class="view-content">
      <el-tabs v-model="activeName" type="border-card">
        <el-tab-pane name="all" label="全部"></el-tab-pane>
        <el-tab-pane name="css" label="css"></el-tab-pane>
        <el-tab-pane name="js" label="js"></el-tab-pane>
        <el-tab-pane name="vue" label="vue"></el-tab-pane>
      </el-tabs>
      <div class="yun-data-list">
        <div class="yun-data-item" v-for="(item,index) in Ydata.list" :key="index" @click="toWatchView(item)">
          <div class="yun-data-img">
            <img src="@/assets/img/default.png" alt="default">
            <div class="item-info">
              <el-tooltip
                effect="dark"
                :content="item.doc"
                placement="bottom-start"
              >
              <div class="yun-data-title">{{ item.title }}</div>
            </el-tooltip>
            </div>
          </div>
          <div class="yun-data-itemb">
            <div class="itemb-item itemb-user">
              <el-icon ><User /></el-icon> 
              {{ item.user }}
            </div>
            <div class="itemb-item itemb-access">
              <el-icon><View /></el-icon>
              {{ item.view }}
            </div>
            <div class="itemb-item itemb-collect">
              <el-icon><Star /></el-icon>
              {{ item.collect }}
            </div>
          </div>
        </div>
      </div>
      <el-pagination :current-page="Ydata.page" background layout="prev, pager, next" :total="Ydata.total"  @current-change="handleCurrentChange" />
    </div>
  </div>
</template>
<script setup>
import {ref,reactive} from 'vue'
import {useRouter} from 'vue-router'
const router = useRouter()
  const searchValue = ref('')
  const activeName = ref('all')
  const Ydata = reactive({
    list:[
      { 
        id:1272173,
        user:"张天宇",
        view:1823,
        collect:153,
        path:'/tools/lnglat-transform',
        title:"坐标转换工具",
        doc:"坐标转换工具,用于坐标之间的相互转换"
      },
    ],
    total:100,
    page:1,
    pageSize:10
  })
  //查看详情
  const toWatchView = (item)=>{
    console.log(item)
    router.push({path:item.path})
  }
  //分页
  const handleCurrentChange = (val)=>{
    console.log(val)
    Ydata.page = val
  }
</script>
<style lang="scss" scoped>
.view-search{
  width:100%;
  display: flex;
  justify-content: center;
  margin-bottom: 20px;
  position: relative;
  .search-input{
    width:400px;
    height:42px;
  }
  .search-btn{
    width:80px;
    height:42px;
    background: var(--main-color);
    color:#fff;
  }
  .yun-add-example{
    position: absolute;
    right:0px;
  }
}
.yun-data-list{
  padding:15px 0;
  display: flex;
  flex-wrap: wrap;
  .yun-data-item{
    width:23%;
    background: #fff;
    border-radius: 6px;
    padding: 15px 0;
    box-shadow: 0 0 4px rgb(221, 214, 214);
    margin:15px 1%;
    cursor: pointer;
    // &:hover{
    //   .item-info{
    //     display: block;
    //   }
    // }
    .yun-data-img{
      width:100%;
      height:240px;
      display: flex;
      align-items: center;
      justify-content: center;
      position: relative;
      img{
        max-width: 100%;
        max-height: 100%;
      }
    }
    .item-info{
      position: absolute;
      bottom: 0;
      left:0;
      width:100%;
      background: rgba(26, 25, 73, 0.4);
      padding:0 10px;
    }
    .yun-data-title{
      width:100%;
      height:40px;
      line-height: 40px;
      color:#fff;
      font-weight: bold;

    }
    .yun-data-itemb{
      height:32px;
      display: flex;
      justify-content: space-between;
      padding:15px 15px 0px 15px;
      .itemb-item{
        width:30%;
        height:100%;
        display: flex;
        align-items: center;
        .el-icon{
          margin-right:10px;
        }
      }
      
    }
  }
}
::v-deep.el-tabs--border-card{
  &>.el-tabs__content{
    padding:0;
  }
  
}
</style>